<script setup lang="ts">
import { useNaiveForm } from '@/hooks/common/form'

defineOptions({
  name: 'ShopSearch',
})

interface Emits {
  (e: 'reset'): void
  (e: 'search'): void
}

const { restoreValidation } = useNaiveForm()

const { list } = defineProps<{
  list: CommonType.Option[]
}>()

const emit = defineEmits<Emits>()

const model = defineModel<any>('model', { required: true })

const reset = async () => {
  await restoreValidation()
  emit('reset')
}
</script>

<template>
  <NCollapse default-expanded-names="search">
    <NCollapseItem title="搜索" name="search">
      <NForm :model label-placement="left" inline :label-width="80" class="flex justify-between">
        <NFormItem label="关键词" path="title">
          <NInput v-model:value="model.title" placeholder="商品名称" />
        </NFormItem>
        <NFormItem label="商品分类" path="category_id" class="w-300">
          <NSelect
            v-model:value="model.category_id"
            :options="list as any"
            clearable
            class="w-50"
            placeholder="商品分类" />
        </NFormItem>
        <NFormItem class="flex items-center gap-2">
          <NButton type="info" size="small" class="mr-2" @click="emit('search')">搜索</NButton>
          <NButton size="small" @click="reset">重置</NButton>
        </NFormItem>
      </NForm>
    </NCollapseItem>
  </NCollapse>
</template>
